<script setup lang="ts">
import { getColWidth, setLastWidth } from '@/utils/FormatData'
import { ref, watch } from 'vue'
const props = defineProps(['data', 'cols'])
const boxRef = ref()
const column = ref()
watch(
  () => props.cols,
  () => {
    const boxWidth = boxRef.value?.offsetWidth
    if (props.cols.length) {
      column.value = getColWidth(props.cols, boxWidth)
      setLastWidth(column.value, boxWidth)
    }
  }
)
</script>
<template>
  <div ref="boxRef">
    <el-table stripe :data="data" class="mt-2">
      <!-- <el-table-column
      v-for="(item, index) in cols"
      :key="index"
      align="center"
      :prop="item.key"
      :label="item.label"
      show-overflow-tooltip
    /> -->
      {{ data }}{{ cols }}
      <template v-for="item in column" :key="item.Key">
        <el-table-column
          align="center"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>{{ scope.row[item.key] }}</span>
            <!-- <template v-if="isDate(item.key)">
            <span>{{ formatDate(scope.row[item.key]) }}</span>
          </template>
          <template v-else>
            <span>{{ scope.row[item.key] }}</span>
          </template> -->
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
